class AppModule extends React.Component {

    constructor(props) {
        super(props);
        this.state = {modules: []};
    }

    componentDidMount() {
        this.updateModules(1,10);
    }

    showAddModal() {
        this.refs.addModal.show();
    }

    addModule() {
        let params = {
            id: this.refs.moduleId.value,
            name: this.refs.moduleName.value,
            description: this.refs.moduleDescription.value
        }

        postJson("/property/app/module/save.x", params, () => {
            layui.layer.msg("添加成功");
            this.refs.addModal.close();
            this.refs.table.refresh();
        })
    }

    delete(id){
        layui.layer.confirm('确定要删除此模块么?',()=>{
            postJson("/property/app/module/delete.x",{id:id},()=>{
                layui.layer.msg("删除成功");
                this.refs.table.refresh();
            })
        })

    }

    updateModules(page,pageSize){
        let params = {page : page,pageSize : pageSize};
        postJson("/property/app/module/query.x", params, (data) => {
            this.pageCount = data.data.size;
            this.setState({modules: data.data.list});
        })
    }

    render() {
        return (
            <Frame header="新增物业端app模块" headerBtns={<HeaderBtn onClick={() => this.showAddModal()}>新增模块</HeaderBtn>}>
                <Table count={this.pageCount} pageOnClick={(page,pageSize)=>this.updateModules(page,pageSize)} ref="table">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>模块名</th>
                            <th>说明</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    {
                        this.state.modules.length > 0 ? this.state.modules.map((module) => {
                            return (
                                <tr>
                                    <td>{module.id}</td>
                                    <td>{module.name}</td>
                                    <td>{module.description}</td>
                                    <td>
                                        <Button btnType="danger" size="xs" onClick={()=>this.delete(module.id)}>删除</Button>
                                    </td>
                                </tr>
                            )
                        }) : ''
                    }
                </Table>
                <Modal title="新增app模块信息" ref="addModal">
                    <Form size="sm">
                        <Item>
                            <Label>模块Id</Label>
                            <Input lay-verify="required" ref="moduleId"/>
                            <Tips>模块Id和APP端代码识别的模块名要一一对应,需要存英文字符串</Tips>
                        </Item>
                        <Item>
                            <Label>模块名称</Label>
                            <Input lay-verify="required" ref="moduleName"/>
                        </Item>
                        <Item>
                            <Label>模块描述</Label>
                            <Input lay-verify="required" ref="moduleDescription"/>
                        </Item>
                        <Item>
                            <Button className="layui-btn layui-btn-normal layui-btn-sm layui-form-btn" lay-submit="true"
                                onClick={() => this.addModule()}>确定</Button>
                        </Item>
                    </Form>
                </Modal>
            </Frame>
        )
    }
}

ReactDOM.render(<AppModule/>, document.getElementById("appModule"));